<script setup lang="tsx">
import { getListApi } from '@/api/invoice'
import { CurdData as invoiceCurdData } from '@/api/invoice/types'
import { CurdData } from '@/api/customer/types'
import { useI18n } from '@/hooks/web/useI18n'
import { ref } from 'vue'

const { t } = useI18n()
// 使用 ref 声明响应式变量 isExpanded
const isExpanded = ref(true)
// 切换展开/收起状态的方法
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}

const props = defineProps({
  currentRow: {
    type: Object,
    default: () => {}
  }
})

const timeLineData = ref<invoiceCurdData[]>([])
const fetchData = async () => {
  const resp = await getListApi({
    customer_id: props.currentRow?.user_id,
    order_type: props.currentRow.isWholesal ? 'wholesale' : 'order',
    order_id: props.currentRow?.id
  })
  timeLineData.value = resp.data.list || []
}

fetchData()
</script>

<template>
  <el-card shadow="always">
    <div @click="togglePanel" class="header cursor-pointer">
      <div class="flex"
        ><span class="title">{{ t('order.invoicingHistory') }}</span
        ><span class="count">(累计{{ timeLineData.length }}次记录)</span></div
      >

      <el-icon v-if="isExpanded">
        <el-icon-arrow-down />
      </el-icon>
      <el-icon v-else>
        <el-icon-arrow-right />
      </el-icon>
    </div>
    <el-collapse-transition>
      <div v-show="isExpanded" class="w-full">
        <el-timeline>
          <el-timeline-item
            v-for="item in timeLineData"
            :key="item.id"
            :timestamp="item.invoicing_date"
            placement="top"
          >
            <el-card>
              <ElLink
                type="primary"
                :href="`#/order/invoice-management/detail?id=${item.id}&source=/customer/customerList/detail?id=${currentRow?.id}&tab=invoicing_history`"
              >
                {{ item.invoice_no }}
              </ElLink>
              <el-tag class="inline-block m-l-10" v-if="item.status == 10" type="primary"
                >待开票</el-tag
              >
              <el-tag class="inline-block m-l-10" v-else-if="item.status == 30" type="info"
                >已取消</el-tag
              >
              <el-tag class="inline-block m-l-10" v-else type="success">已完成</el-tag>
              <p>{{ t('invoice.invoice_amount') }}: {{ item.invoice_amount }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<style scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;

  .flex {
    align-items: center;

    .title {
      font-weight: 900;
    }

    .count {
      font-size: 14px;
      color: #999;
    }
  }
}
</style>
